<template>
  <view class="search-box-container">
    <u-search
      v-model="searchValue"
      :placeholder="placeholder"
      :show-action="showAction"
      :animation="true"
      :clearabled="true"
      :shape="shape"
      :bg-color="bgColor"
      :border-color="borderColor"
      :height="height"
      :input-align="inputAlign"
      :disabled="disabled"
      action-text="搜索"
      @search="onSearch"
      @clear="onClear"
      @custom="onSearch"
      @change="onChange"
      @focus="onFocus"
      @blur="onBlur"
    >
      <template #label v-if="showLabel">
        <view class="search-label">
          <slot name="label">
            <text>{{ label }}</text>
          </slot>
        </view>
      </template>
    </u-search>
  </view>
</template>

<script>
/**
 * 搜索框公共组件
 * @description 统一的搜索框组件，支持自定义占位符、搜索和清除事件
 * @property {String} value - 搜索框的值
 * @property {String} placeholder - 占位符文本
 * @property {Boolean} showAction - 是否显示右侧按钮
 * @property {String} shape - 搜索框形状，可选值为 round（圆角）、square（方形）
 * @property {String} bgColor - 搜索框背景颜色
 * @property {String} borderColor - 边框颜色
 * @property {String|Number} height - 搜索框高度
 * @property {String} inputAlign - 输入框内容对齐方式，可选值为 left、center、right
 * @property {Boolean} disabled - 是否禁用
 * @property {Boolean} showLabel - 是否显示左侧标签
 * @property {String} label - 左侧标签文本
 * @event {Function} search - 点击搜索按钮或回车时触发
 * @event {Function} clear - 点击清除按钮时触发
 * @event {Function} custom - 点击右侧自定义按钮时触发
 * @event {Function} change - 输入框内容变化时触发
 * @event {Function} focus - 输入框获得焦点时触发
 * @event {Function} blur - 输入框失去焦点时触发
 */
export default {
  name: 'SearchBox',
  props: {
    // 搜索框的值
    value: {
      type: String,
      default: ''
    },
    // 占位符
    placeholder: {
      type: String,
      default: '请输入搜索内容'
    },
    // 是否显示右侧按钮
    showAction: {
      type: Boolean,
      default: false
    },
    // 搜索框形状，可选值为 round（圆角）、square（方形）
    shape: {
      type: String,
      default: 'round'
    },
    // 搜索框背景颜色
    bgColor: {
      type: String,
      default: '#f8f8f8'
    },
    // 边框颜色
    borderColor: {
      type: String,
      default: 'transparent'
    },
    // 搜索框高度
    height: {
      type: [String, Number],
      default: 46
    },
    // 输入框内容对齐方式，可选值为 left、center、right
    inputAlign: {
      type: String,
      default: 'left'
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 是否显示左侧标签
    showLabel: {
      type: Boolean,
      default: false
    },
    // 左侧标签文本
    label: {
      type: String,
      default: '搜索'
    }
  },
  data() {
    return {
      searchValue: this.value
    }
  },
  watch: {
    value(newVal) {
      this.searchValue = newVal
    }
  },
  methods: {
    // 搜索事件
    onSearch() {
      console.log('搜索事件触发', this.searchValue);
      this.$emit('search', this.searchValue)
    },
    
    // 清除事件
    onClear() {
      this.searchValue = ''
      this.$emit('clear')
      this.$emit('input', '')
    },
    
    // 自定义按钮点击事件
    onCustom() {
      console.log('自定义按钮点击事件');
      this.$emit('custom', this.searchValue)
      this.onSearch(); // 同时触发搜索事件
    },
    
    // 输入框内容变化事件
    onChange(value) {
      this.searchValue = value
      this.$emit('input', value)
      this.$emit('change', value)
    },
    
    // 获得焦点事件
    onFocus() {
      this.$emit('focus')
    },
    
    // 失去焦点事件
    onBlur() {
      this.$emit('blur')
    }
  }
}
</script>

<style lang="scss" scoped>
.search-box-container {
  width: 100%;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
  padding: 0 20rpx;
  box-sizing: border-box;
}

.search-label {
  margin-right: 10rpx;
  font-size: 26rpx;
  color: #606266;
}

/* 修改 u-search 组件样式 */
:deep(.u-search) {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

:deep(.u-search__content) {
  background-color: #f8f8f8 !important;
  border-radius: 28rpx !important;
  height: 46rpx !important;
  border: none !important;
  box-shadow: none !important;
  flex: 1;
}

:deep(.u-search__content__icon) {
  margin: 0 4rpx 0 12rpx;
  transform: scale(0.7);
}

:deep(.u-search__content__input) {
  font-size: 22rpx;
  color: #333;
  height: 46rpx !important;
  line-height: 46rpx !important;
}

:deep(.u-search__action) {
  color: #2979ff;
  font-size: 24rpx;
  padding-left: 10rpx;
  padding-right: 10rpx;
  font-weight: normal;
  width: auto;
  min-width: 70rpx;
  max-width: 100rpx;
  text-align: center;
  flex-shrink: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  height: 46rpx;
  line-height: 46rpx;
}

:deep(.u-icon) {
  color: #909399;
  transform: scale(0.7);
}
</style> 